
$('.circular>span').css('cursor','pointer');
//8
$('.wrap-slide1-right li:nth-of-type(8)').hover(function() {
		$(this).addClass('active1').find('span').css('font-size', '0.12rem').html('Cosmo++<br>BDP');
	$('.circular>p').addClass('active2').text('一站式大数据应用平台');
	$('.circular>span').css('cursor','pointer').html('Cosmo++<span>&nbsp;BDP</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

	
}, function() {
	$(this).removeClass('active1').find('span').css('font-size', '0.16rem').text('BDP');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').css('cursor','pointer').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//1
$('.wrap-slide1-right li:nth-of-type(1)').hover(function() {
	$(this).addClass('active12').find('span').css('font-size', '0.12rem').html('Cosmo++<br>MBI');
	$('.circular>p').addClass('active2').text('自助式企业级BI平台');
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;MBI</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active12').find('span').css('font-size', '0.16rem').text('MBI');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//2
$('.wrap-slide1-right li:nth-of-type(2)').hover(function() {
	
	$(this).addClass('active13').find('span').css('font-size', '0.12rem').html('Cosmo++<br>BPM');
	$('.circular>p').addClass('active2').text('总线式业务协同平台');
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;BPM</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active13').find('span').css('font-size', '0.16rem').text('BPM');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//3
$('.wrap-slide1-right li:nth-of-type(3)').hover(function() {
	$(this).addClass('active14').find('span').css('font-size', '0.12rem').html('Cosmo++<br>MDM');
	
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;MDM</span>');
	$('.circular>p').addClass('active2').text('交互式主数据管理平台');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active14').find('span').css('font-size', '0.16rem').text('MDM');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//4

$('.wrap-slide1-right li:nth-of-type(4)').hover(function() {
		$(this).addClass('active1').find('span').css('font-size', '0.12rem').html('Cosmo++<br>MEM');
	$('.circular>p').addClass('active2').text('主动式元数据管理平台');
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;MEM</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active1').find('span').css('font-size', '0.16rem').text('MEM');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//5
$('.wrap-slide1-right li:nth-of-type(5)').hover(function() {
	$(this).addClass('active12').find('span').css('font-size', '0.12rem').html('Cosmo++<br>DAP');
	$('.circular>p').addClass('active2').text('多层级数据采集平台');
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;DAP</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active12').find('span').css('font-size', '0.16rem').text('DAP');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//6
$('.wrap-slide1-right li:nth-of-type(6)').hover(function() {
	$(this).addClass('active13').find('span').css('font-size', '0.12rem').html('Cosmo++<br>DIX');
	$('.circular>p').addClass('active2').text('泛数据集成与交换平台');
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;DIX</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active13').find('span').css('font-size', '0.16rem').text('DIX');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})
//7
$('.wrap-slide1-right li:nth-of-type(7)').hover(function() {
	$(this).addClass('active14').find('span').css('font-size', '0.12rem').html('Cosmo++<br>IDP');
	$('.circular>p').addClass('active2').text('可视化集成开发平台');
	$('.circular>span').addClass('active2').html('Cosmo++<span>&nbsp;IDP</span>');
	$('.circular i').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'});              

}, function() {
	$(this).removeClass('active14').find('span').css('font-size', '0.16rem').text('IDP');
	$('.circular>p').removeClass('active2').text('艺术化的开发平台');
	$('.circular>span').removeClass('active2').text('产品家族');
	$('.circular i').css({'-webkit-animation-play-state':'running','animation-play-state':'running'});

})

//头部产品菜单的hover效果
//头部的hover效果
$('.price').mouseenter(function() {
	$('.product-box').show();
});
$('.price').mouseleave(function() {
	$('.product-box').stop().slideUp();
});



//第二屏
var isShowCircle = false, whichCirArr = []; //控制圆环交互的变量
var canvas = document.getElementById('trails');
function resize_canvas() {
	console.log(window)
	if(window.innerWidth >= 900) {
		canvas.width = window.innerWidth;
	}
	canvas.height = window.innerHeight;
	drawTrails(canvas.width, canvas.height);
}
function drawTrails(cxtW, cxtH) {
	isShowCircle = false;
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0, 0, cxtW, cxtH);
	ctx.save();
	ctx.setLineDash([1, 2]);
	ctx.translate(0, Math.floor(cxtH/5)*2.8);
	ctx.beginPath();
	//页面曲线
	ctx.moveTo(0, 30);
	var medWid = Math.floor(cxtW/20);
	var lineLen = Math.floor(cxtH*0.2);
	lineLen = lineLen > 160 ? 160 : lineLen;
	console.log(lineLen)
	ctx.quadraticCurveTo(medWid, -0.8*lineLen, 2.5*medWid, 0);
	ctx.quadraticCurveTo(4*medWid, 0.9*lineLen, 5.6*medWid, 0.15*lineLen);
	ctx.quadraticCurveTo(6.5*medWid, -0.35*lineLen, 7.5*medWid, -0.08*lineLen);
	ctx.quadraticCurveTo(10.5*medWid, 1.2*lineLen, 12*medWid, -0.5*lineLen);
	ctx.quadraticCurveTo(13*medWid, -1.6*lineLen, 14.6*medWid, -0.55*lineLen);
	ctx.quadraticCurveTo(16.5*medWid, 0.2*lineLen, 18.3*medWid, -0.55*lineLen);
	ctx.quadraticCurveTo(19.5*medWid, -lineLen, 20.5*medWid, -0.8);
	//使用棕色的粗线条来绘制路径  
	ctx.strokeStyle = '#00ABFF';
	ctx.lineWidth = 1;
	ctx.stroke();
	//恢复之前的canvas 状态  
	ctx.restore();

	/////////////////////////////圆///////////////////////////////
	
	
	ctx.translate(0, Math.floor(cxtH/5)*2.8);

	drawCircle(ctx, 3*medWid, 0.25*lineLen, lineLen, true, 10, '#15C8E8', 0.03*cxtW, '数据采集');
	drawCircle(ctx, 3.5*medWid, 0.4*lineLen, lineLen, false, 5, '#1693D5', 0.03*cxtW, '数据应用');
	drawCirclePath(ctx, 4*medWid, 0.48*lineLen, 5);
	drawCircle(ctx, 6*medWid, 0, lineLen, false, 15, '#D22342', 0.03*cxtW, '数据管理');
	drawCircle(ctx, 7.5*medWid, -0.07*lineLen, lineLen, true, 10, '#8CD717', 0.03*cxtW, '数据存储');
	drawCirclePath(ctx, 8.5*medWid, 0.28*lineLen, 8);
	drawCircle(ctx, 9.5*medWid, 0.45*lineLen, 0.7*lineLen, false, 8, '#15C8E8', 0.03*cxtW, '数据服务');
	drawCircle(ctx, 10*medWid, 0.46*lineLen, 1.2*lineLen, true, 8, '#17D79C', 0.03*cxtW, '数据计算');
	drawCircle(ctx, 12*medWid, -0.5*lineLen, 1.2*lineLen, false, 8, '#17D79C', 0.03*cxtW, '数据治理');
	drawCircle(ctx, 13*medWid, -1.05*lineLen, 0.8*lineLen, true, 11, '#1693D5', 0.03*cxtW, '数据分析');
	drawCircle(ctx, 15*medWid, -0.42*lineLen, 1.2*lineLen, true, 5, '#17D79C', 0.03*cxtW, '数据挖掘');
	drawCircle(ctx, 15.3*medWid, -0.33*lineLen, 1.2*lineLen, false, 15, '#B70F86', 0.03*cxtW, '数据开发');
	drawCirclePath(ctx, 16*medWid, -0.2*lineLen, 5);
	drawCircle(ctx, 17*medWid, -0.22*lineLen, 1.2*lineLen, true, 12, '#1457CA', 0.03*cxtW, '数据可视化');


	whichCirArr.length = 0;
	whichCirArr.push(
		{ x: 3*medWid, y: -0.75*lineLen - 8 },
		{ x: 7.5*medWid, y: -1.15*lineLen },
		{ x: 10*medWid, y: -0.74*lineLen - 8 },
		{ x: 13*medWid, y: -1.85*lineLen - 8 },
		{ x: 15*medWid, y: -1.62*lineLen - 8 },
		{ x: 17*medWid, y: -1.44*lineLen - 8 },
		{ x: 3.5*medWid, y: 1.4*lineLen + 10 },
		{ x: 6*medWid, y: 1*lineLen + 10 },
		{ x: 9.5*medWid, y: 1.15*lineLen + 10 },
		{ x: 12*medWid, y: 0.7*lineLen + 10 },
		{ x: 15.3*medWid, y: 0.87*lineLen + 10 }

	);
console.log(whichCirArr)
}
//画小圆的函数
function drawCircle(ctx, x, origin, lineWidth, direction, smallCircleRadius, bigCircleColor, bigCircleRadius, words){
	//画俩圆连接的线
	ctx.beginPath();
	ctx.moveTo(x, origin);
	var y = direction ? (0 - (lineWidth - origin)) : (lineWidth + origin);
    ctx.lineTo(x, y);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#00ABFF";
    ctx.stroke();
    //画起点的小圆
    ctx.fillStyle = '#01ABFF';
    ctx.beginPath();
    ctx.arc(x, origin, smallCircleRadius, 0, 2*Math.PI);
    ctx.fill();
    //画终点大圆
    ctx.fillStyle = bigCircleColor;
    ctx.beginPath();
    var bigY = y < 0 ? (y - 10) : (y + 10);
    ctx.arc(x, bigY, bigCircleRadius, 0, 2*Math.PI);
    ctx.fill();
     //显示文字
    ctx.fillStyle = '#222';
    ctx.font="13px Arial";
    ctx.textAlign="center";
    ctx.textBaseline="middle";
	ctx.fillText(words, x, bigY);
	return;
}
//画小圆圈的函数
function drawCirclePath(ctx, x, origin, circleRadius){
    ctx.fillStyle = '#01ABFF';
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.arc(x, origin, circleRadius, 0, 2*Math.PI);
    ctx.stroke();
	return;
}
//画旋转的小圆
function rotateCircle(ctx, x, origin, lineWidth, direction, smallCircleRadius, bigCircleColor, bigCircleRadius, words){
	//画俩圆连接的线
	ctx.beginPath();
	ctx.moveTo(x, origin);
	var y = direction ? (0 - (lineWidth - origin)) : (lineWidth + origin);
    ctx.lineTo(x, y);
    ctx.lineWidth = 1;
    ctx.strokeStyle = "#00ABFF";
    ctx.stroke();
    //画起点的小圆
    ctx.fillStyle = '#01ABFF';
    ctx.beginPath();
    ctx.arc(x, origin, smallCircleRadius, 0, 2*Math.PI);
    ctx.fill();
    //画终点大圆
    ctx.fillStyle = '#00ACFF';
    ctx.beginPath();
    var bigY = y < 0 ? (y - 10) : (y + 10);
    ctx.arc(x, bigY, 5, 0, 2*Math.PI);
    ctx.fill();
     //显示文字
    ctx.fillStyle = '#222';
    ctx.font="13px Arial";
    ctx.textAlign="center";
    ctx.textBaseline="middle";
	ctx.fillText(words, x, bigY);
	return;
}
//获取正弦对边长
function getSinLen(deg, r){
	return Math.round(r*Math.sin(2*Math.PI/360*deg));
}
//获取余弦临边长
function getCosLen(deg, r){
	return Math.round(r*Math.cos(2*Math.PI/360*deg));
}
//获取圆弧上小圆的坐标
function circlePosiTop(deg, r, originX, originY){
	var pathX, pathY, pathDir, deg = deg > 360 ? deg - 360 : deg;
	switch(true){
		case (deg > 0 && deg <= 90):
			pathDir = 'left';
			pathX = getSinLen(deg, r) + originX + (deg >= 36 ? 10 : 0);
			pathY = getCosLen(deg, r) + originY + (deg === 18 ? 10 : 0);
			break;
		case (deg > 90 && deg <= 180):
			pathDir = deg === 180 ? 'center' : 'left';
			pathX = getCosLen(deg - 90, r) + originX + 10;
			pathY = originY - getSinLen(deg - 90, r) - (deg > 144 ? 10 : 0)  - (deg === 180 ? 10 : 0);
			break;
		case (deg > 180 && deg <= 270):
			pathDir = 'right';
			pathX = originX - getSinLen(deg - 180, r) - 10;
			pathY = originY - getCosLen(deg - 180, r)  - (deg === 198 ? 10 : 0);
			break;
		case (deg > 270 && deg <= 360):
			pathDir = 'right';
			var deg2 = deg - 270;
			pathX = originX - getCosLen(deg2, r) - 10 + (deg2 >= 72 ? 10 : 0);
			pathY = getSinLen(deg2, r) + originY + (deg2 === 72 ? 10 : 0);
			break;
	}
	return { x: pathX, y: pathY, dir: pathDir }
}
//获取下面弧线上小圆的坐标
function circlePosiBott(deg, r, originX, originY){
	var pathX, pathY, pathDir, deg = deg > 360 ? deg - 360 : deg;
	switch(true){
		case (deg > 0 && deg <= 90):
			pathDir = 'left';
			pathX = getSinLen(deg, r) + originX + (deg >= 36 ? 10 : 0);
			pathY = originY - getCosLen(deg, r) - (deg === 18 ? 10 : 0);
			break;
		case (deg > 90 && deg <= 180):
			pathDir = deg === 180 ? 'center' : 'left';
			pathX = getCosLen(deg - 90, r) + originX + 10;
			pathY = originY + getSinLen(deg - 90, r) + (deg > 144 ? 10 : 0)  + (deg === 180 ? 10 : 0);
			break;
		case (deg > 180 && deg <= 270):
			pathDir = 'right';
			pathX = originX - getSinLen(deg - 180, r) - 10;
			pathY = originY + getCosLen(deg - 180, r)  + (deg === 198 ? 10 : 0);
			break;
		case (deg > 270 && deg <= 360):
			pathDir = 'right';
			var deg2 = deg - 270;
			pathX = originX - getCosLen(deg2, r) - 10 + (deg2 >= 72 ? 10 : 0);
			pathY = originY - getSinLen(deg2, r) - (deg2 === 72 ? 10 : 0);
			break;
	}
	return { x: pathX, y: pathY, dir: pathDir }
}
//返回当前画布中点击的是哪个圆
function getWhichCircle(evt, cxtWidth, medWid, medHei){
	var x = evt.x, y = evt.y - medHei, originX, originY, dir, data;
	var cirWidth = 0.03*cxtWidth;
	switch(true){ 
		//数据采集
		case (x > (whichCirArr[0].x - cirWidth) && x < (whichCirArr[0].x + cirWidth) && y > (whichCirArr[0].y - cirWidth) && y < (whichCirArr[0].y + cirWidth)):
			originX = whichCirArr[0].x;
			originY = whichCirArr[0].y;
			dir = false;
			data = ["Flume", "Sqoop", "Execl", "ETL", "爬虫", "传输", "填报", "共享", "订阅"]
		break;
		//数据存储
		case (x > (whichCirArr[1].x - cirWidth) && x < (whichCirArr[1].x + cirWidth) && y > (whichCirArr[1].y - cirWidth) && y < (whichCirArr[1].y + cirWidth)):
			originX = whichCirArr[1].x;
			originY = whichCirArr[1].y;
			dir = false;
			data = ["HDFS", "NoSql", "Hbase", "资源管理", "文件", "Cube", "DW", "DB"]
		break;
		//数据计算
		case (x > (whichCirArr[2].x - cirWidth) && x < (whichCirArr[2].x + cirWidth) && y > (whichCirArr[2].y - cirWidth) && y < (whichCirArr[2].y + cirWidth)):
			originX = whichCirArr[2].x;
			originY = whichCirArr[2].y;
			dir = false;
			data = ["  Hive", " Impala", "LylinOLAP", "SQL引擎", "内存计算", "搜索引擎", "规则引擎", "扩展计算", "流式计算", "OLAP引擎"]
		break;
		//数据分析
		case (x > (whichCirArr[3].x - cirWidth) && x < (whichCirArr[3].x + cirWidth) && y > (whichCirArr[3].y - cirWidth) && y < (whichCirArr[3].y + cirWidth)):
			originX = whichCirArr[3].x;
			originY = whichCirArr[3].y;
			dir = false;
			data = ["实时分析", "业务视图", "  OLAP", "  建模",  "  钻取", " 自助", "规则",'报表']
		break;
		//数据挖掘
		case (x > (whichCirArr[4].x - cirWidth) && x < (whichCirArr[4].x + cirWidth) && y > (whichCirArr[4].y - cirWidth) && y < (whichCirArr[4].y + cirWidth)):
			originX = whichCirArr[4].x;
			originY = whichCirArr[4].y;
			dir = false;
			data = ["Mahout", "HBase", "可视化管理", "图形化引擎", "MLlib", "R"]
		break;
		//数据可视化
		case (x > (whichCirArr[5].x - cirWidth) && x < (whichCirArr[5].x + cirWidth) && y > (whichCirArr[5].y - cirWidth) && y < (whichCirArr[5].y + cirWidth)):
			originX = whichCirArr[5].x;
			originY = whichCirArr[5].y;
			dir = false;
			data = ["思维导图", "线路图", "Echart", "控件", "图表", "仪表", "地图", "图解"]
		break;
		//数据应用
		case (x > (whichCirArr[6].x - cirWidth) && x < (whichCirArr[6].x + cirWidth) && y > (whichCirArr[6].y - cirWidth) && y < (whichCirArr[6].y + cirWidth)):
			originX = whichCirArr[6].x;
			originY = whichCirArr[6].y;
			dir = true;
			data = ["M-R Yarn", "外部集成", "业务协同", "自由页面", "应用门户", "个人门户", "移动门户", "智能菜单", "自动报告", "Pig"]
		break;
		//数据管理
		case (x > (whichCirArr[7].x - cirWidth) && x < (whichCirArr[7].x + cirWidth) && y > (whichCirArr[7].y - cirWidth) && y < (whichCirArr[7].y + cirWidth)):
			originX = whichCirArr[7].x;
			originY = whichCirArr[7].y;
			dir = true;
			data = [ 'Zookeeper', "版本", "监控", "集成", "部署", "授权", "权限", "用户", "日志"]
		break;
		//数据服务
		case (x > (whichCirArr[8].x - cirWidth) && x < (whichCirArr[8].x + cirWidth) && y > (whichCirArr[8].y - cirWidth) && y < (whichCirArr[8].y + cirWidth)):
			originX = whichCirArr[8].x;
			originY = whichCirArr[8].y;
			dir = true;
			data = [ "  权限", "Session", "Data Gate", "Process Ctrl", "Service Gate", "  资源", "  日志", "  ESB"]
		break;
		//数据治理
		case (x > (whichCirArr[9].x - cirWidth) && x < (whichCirArr[9].x + cirWidth) && y > (whichCirArr[9].y - cirWidth) && y < (whichCirArr[9].y + cirWidth)):
			originX = whichCirArr[9].x;
			originY = whichCirArr[9].y;
			dir = true;
			data = [ "清洗", "审计", "归档", "备份", "元数据", "主数据", "指标管理", "质量控制"]
		break;
		//数据开发
		case (x > (whichCirArr[10].x - cirWidth) && x < (whichCirArr[10].x + cirWidth) && y > (whichCirArr[10].y - cirWidth) && y < (whichCirArr[10].y + cirWidth)):
			originX = whichCirArr[10].x;
			originY = whichCirArr[10].y;
			dir = true;
			data = ["JS扩展", "HTTP", "HTTPS", "Java API", "Web Service", "云协作", "模板库"]
		break;
	}
	return {
		originX: originX,
		originY: originY,
		dir: dir,
		data: data
	}
}
//canvas鼠标样式

//canvas添加事件
var initEvtObj = null; //定义初始化变量存储当前hover的圆对象，防止重复绘制图层
var isHover = { }; //存储当前hover的小圆位置信息，用于清除计时器绘制，防止同时绘制多个圆环
canvas.addEventListener("mousemove", function(e){
	e.preventDefault();
	var canvas = document.getElementById('trails');
	var cxt = canvas.getContext('2d');
	var medWid = Math.floor(canvas.width/20);
	var medHei = Math.floor(canvas.height/5)*2.8;
	var time = 18, drawInterval = null;
	var whichCircle = getWhichCircle(e, canvas.width, medWid, medHei);
	console.log(whichCircle)
	if(whichCircle.originX && whichCircle.originY){
		isHover[whichCircle.originX] = true;
		isHover[whichCircle.originY] = true;
		isShowCircle = true;
		if(initEvtObj != null && whichCircle.originX == initEvtObj.originX && whichCircle.originY == initEvtObj.originY)
			return;
		initEvtObj = whichCircle;
		if(isShowCircle){
			resize_canvas();
		}
		drawInterval = setInterval(function(){
			if(!isHover[whichCircle.originX] ||!isHover[whichCircle.originY]){
				clearInterval(drawInterval);
			}
			cxt.save();

			cxt.beginPath();
			cxt.lineWidth = '1';
			var startAngle = whichCircle.dir ? -Math.PI/2: Math.PI/2;
			var endAngle = whichCircle.dir ? startAngle + time * (Math.PI / 180) : startAngle - time * (Math.PI / 180);
			cxt.arc(whichCircle.originX, whichCircle.originY, 0.05*canvas.width, startAngle, endAngle, !whichCircle.dir);
			cxt.stroke();

			if(!whichCircle.dir)
			var wordPath = circlePosiTop(time, 0.05*canvas.width, whichCircle.originX, whichCircle.originY);
			else
			var wordPath = circlePosiBott(time, 0.05*canvas.width, whichCircle.originX, whichCircle.originY);
			//显示文字
		    cxt.fillStyle = '#fff';
		    cxt.font = "12px Arial";
		    cxt.textAlign = wordPath.dir;
		    cxt.textBaseline = "middle";
			cxt.fillText(whichCircle.data[Math.floor(time/18)-1], wordPath.x, wordPath.y);

			cxt.translate(whichCircle.originX, whichCircle.originY);
			cxt.rotate(!whichCircle.dir ? -time*360/360*Math.PI/180: (time+180)*360/360*Math.PI/180);
			cxt.beginPath();
			cxt.arc(0, 0.05*canvas.width, 2.5, 0, 360);
			cxt.closePath();
			cxt.fillStyle = '#00ACFF';
			cxt.fill();

			cxt.restore();

			time += 18;
			if(time > whichCircle.data.length*18){
				clearInterval(drawInterval);
				time = 18;
			}
		}, 10);
	return;
	}else{
		initEvtObj = null;//防止同一圆不可hover多次
		for(var i in isHover){
			isHover[i] = false;
		}
		clearInterval(drawInterval);
		resize_canvas();
	}
	if(isShowCircle){
		resize_canvas();
		initEvtObj = null;
	}
});

window.addEventListener("load", resize_canvas, true);

window.onload = function() {
	$('header').fadeIn(1000);
	
	

	setTimeout(function(){
		
		setTimeout(function(){
			$('.wrap-slide').fadeIn(3000);
			$('.wrapper_content').fadeIn(2000);
			$('.slide2-span-cricle').fadeIn(800);
			$('.slide2-div').fadeIn(2000)
			$('.slide2-span-line').slideDown(1500);	
				
		},3000)

	//	$('#slide1').fadeIn(400)
		$('header').fadeIn(400)
		

	},1500)
	setTimeout(function(){
		
		setTimeout(function(){
			$('.wrap-slide').fadeIn(3000);				
		},4000)
		$('#slide1').fadeIn(400)
	},1000)
	
	
	if (document.body.clientWidth == 1920) {
		//alert(1)
//		$('#img1').attr('src','images/index/logo21X.png')
	
		$('#img2').attr('src','images/index/logo11X.png')
		$('#img1').attr('src','images/index/logo11X.png')
	} else{
		
	
	
		$('#img1').attr('src','images/index/logo_in_white.png')
		$('#img2').attr('src','images/index/logo_in_white.png')
	
	}

}

//3
$('.slide3-left').hover(function(){
	$('.slide3-bottom').addClass('activeB')
},function(){
	$('.slide3-bottom').removeClass('activeB')
})

//4
$('.leftP').hover(function(){
	//alert(11)
	$(this).addClass('activeP')
},function(){
	$(this).removeClass('activeP')
})

//进行初始化操作
$("#imgs>li").eq(0).css("left","0px");
var thisPic = 0,next = 0,direct=1;

function move(dir){
	if(dir==1){
	    thisPic = ++next-1;
	    next= (next==2)?0:next;
	}else{
	    thisPic = --next+1;
	    next= (next==-1)?1:next;
	}
	go(thisPic,next,dir,next)
}
function go(thisIndex,nextTndex,direct,ball){
	$("#btn>li").css('cursor','pointer');
	$("#imgs>li").eq(nextTndex).css({left:direct*11.4+"rem",opacity:".2"});
	$("#imgs>li").eq(thisIndex).stop(true,true).animate({left:-11.4*direct+"rem",opacity:".1"},500);
	$("#imgs>li").eq(nextTndex).stop(true,true).animate({left:"0px",opacity:"1"},500);
	$("#btn>li").eq(ball).attr("class","red").siblings().attr("class","green");
}
var t = setInterval("move(1)",3000);
//鼠标移动到页面停止轮播
$("#polling").hover(function(){
	$("#btn>li").css('cursor','pointer');
	clearInterval(t)

},function(){
	$("#btn>li").css('cursor','pointer');
	t = setInterval("move(1)",3000);	
})

//			//给按钮添加滑动事件
$("#btn>li").click(function(){
	var index = $(this).index();
	index>next?go(next,index,1,index):go(next,index,-1,index);
	next=index;
})
$("#slide5_inp").focus(function(){
    $(this).css("border","none");
});
$("#slide5_inp").blur(function(){
    $(this).css("border","none");
});


//////////////第四屏相关功能//////////////////

//切换控制器
$(".slide4-control").on("click", "span", function(e){
	var index = $(this).index();
	$(".s4-line").css({
		'width': $(this).css('width'),
		'padding': '0',
		'margin-left': ((1-index)*0.2)+'rem',
		'left': (index*50)+'%'
	});
	$(".slide4-control span").removeClass('s4-con-act');
	$(this).addClass('s4-con-act');
})

//////////////第五屏相关功能//////////////////
